import React, {PureComponent} from 'react';
import {Link} from 'dva/router';
import {Badge, Table, Tag} from 'antd';
import styles from './index.less';

const statusMap = ['processing', 'success', 'error'];
const typesMap = {'good': '商品', 'service': '服务'};

class UserCouponGroupTable extends PureComponent {
    state = {
        selectedRowKeys: [],
        totalCallNo: 0,
    };


    handleRowSelectChange = (selectedRowKeys, selectedRows) => {
        const totalCallNo = selectedRows.reduce((sum, val) => {
            return sum + parseFloat(val.callNo, 10);
        }, 0);

        if (this.props.onSelectRow) {
            this.props.onSelectRow(selectedRows);
        }

        this.setState({selectedRowKeys, totalCallNo});
    }

    handleTableChange = (pagination, filters, sorter) => {
        this.props.onChange(pagination, filters, sorter);
    }

    cleanSelectedKeys = () => {
        this.handleRowSelectChange([], []);
    }

    handleDelete = (id) => {
        this.props.handleDelete(id)
    }

    render() {
        const {selectedRowKeys, totalCallNo} = this.state;
        const {data: {list, pagination}, loading} = this.props;

        const status = ['启用', '禁用'];

        const columns = [
            {
                title: '编号',
                dataIndex: 'id',
            },
            {
                title: '优惠券名称',
                dataIndex: 'name',
            },
            {
                title: '类型',
                dataIndex: 'type',
                render: (text) => {
                    return (
                        <Tag color="blue">{typesMap[text]}</Tag>
                    );
                },
            },
            {
                title: '总数量',
                dataIndex: 'coupons_count',
                render: (text) => {
                    return (
                        <Tag color="orange">{text}</Tag>
                    );
                },
            },
            {
                title: '剩余数量',
                dataIndex: 'get_coupons_count',
                render:(text,record)=>{
                    return (
                        <Tag color="green">{record.coupons_count-text}</Tag>
                    )
                }
            },
            {
                title: '金额',
                dataIndex: 'money',
                render: (text) => {
                    return (
                        <Tag color="orange">{text}</Tag>
                    );
                },
            },
            {
                title: '所需金额',
                dataIndex: 'need_price',
            },

            {
                title: '到期时间',
                dataIndex: 'end_at',
            },

            {
                title: '操作',
                dataIndex: 'action',
                render: (text, record) => (
                    <p>
                        <Link to={`/coupon/group/${record.id}`}>查看优惠券</Link>
                        <a style={{marginLeft:10}} onClick={()=>this.handleDelete(record.id)}>删除</a>
                    </p>
                ),
            },
        ];

        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            current: pagination.current,
            pageSize: pagination.size,
            total: pagination.total,
        };

        const rowSelection = {
            selectedRowKeys,
            onChange: this.handleRowSelectChange,
            getCheckboxProps: record => ({
                disabled: record.disabled,
            }),
        };

        return (
            <div className={styles.standardTable}>

                <Table
                    loading={loading}
                    rowKey={record => record.id}
                    dataSource={list}
                    columns={columns}
                    pagination={paginationProps}
                    onChange={this.handleTableChange}
                />
            </div>
        );
    }
}

export default UserCouponGroupTable;
